<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
    },
    setOptions(data) {
      this.chart.setOption(
          {
            tooltip: {
              trigger: 'item',
              formatter: "{b}: {c} ({d}%)",
            },
            legend: {

              bottom: '2%',
              left: 'center',
              itemWidth: 5,
              itemHeight: 5,
              textStyle: {
                  fontSize: '12',
                  fontFamily: 'PingFang SC',
                  fontWeight: 500,
                  color: '#FFFFFF'
                }
            },
            series: [
              {
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                // padding: [2, 2, 2, 2],
                label: {
                  formatter: "{per|{d}%}",
                  borderWidth: 4, //控制 悬浮信息边框的大小
                  rich: {
                     per: {
                      color: "#fff",
                      padding: [2, 4],
                      fontSize: 14,
                      fontFamily: 'YouSheBiaoTiHei',
                      fontWeight: 400,
                      },
                  }
                },
                emphasis: {
                  label: {
                    // show: true,
                    fontSize: 40,
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: true
                },
                data
              }
            ]
          }
            )
          }
        }
}
</script>
